import { View, Text, ScrollView, Image, TouchableOpacity, Dimensions } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Ionicons } from '@expo/vector-icons';
import { router } from 'expo-router';

const { width: screenWidth } = Dimensions.get('window');

// 用户数据卡片信息
const userStats = [
  { id: '1', title: '收藏', value: '8' },
  { id: '2', title: '足迹', value: '12' },
  { id: '3', title: '优惠券', value: '3' },
  { id: '4', title: '积分', value: '521' },
];

// 订单类型数据
const orderTypes = [
  { id: '1', name: '待付款', icon: 'wallet-outline', badge: '2' },
  { id: '2', name: '待发货', icon: 'cube-outline', badge: '1' },
  { id: '3', name: '待收货', icon: 'bicycle-outline' },
  { id: '4', name: '待评价', icon: 'chatbox-outline', badge: '3' },
  { id: '5', name: '退换/售后', icon: 'refresh-circle-outline' },
];

// 功能菜单数据
const menuItems = [
  {
    title: '我的服务',
    items: [
      { id: '1', name: '收货地址', icon: 'location', color: 'bg-blue-500' },
      { id: '2', name: '会员中心', icon: 'diamond', color: 'bg-yellow-500' },
      { id: '3', name: '优惠券', icon: 'ticket', color: 'bg-red-500' },
      { id: '4', name: '收藏夹', icon: 'heart', color: 'bg-pink-500' },
      { id: '5', name: '浏览记录', icon: 'time', color: 'bg-orange-500' },
      { id: '6', name: '每日签到', icon: 'calendar', color: 'bg-green-500', badge: '签到' },
      { id: '7', name: '邀请有礼', icon: 'gift', color: 'bg-purple-500' },
      { id: '8', name: '官方客服', icon: 'headset', color: 'bg-cyan-500' },
    ]
  },
  {
    title: '更多服务',
    items: [
      { id: '9', name: '帮助中心', icon: 'help-circle', color: 'bg-indigo-500' },
      { id: '10', name: '设置', icon: 'settings', color: 'bg-gray-500' },
      { id: '11', name: '关于我们', icon: 'information-circle', color: 'bg-teal-500' },
      { id: '12', name: '意见反馈', icon: 'mail', color: 'bg-rose-500' },
    ]
  }
];

export default function ProfilePage() {
  const insets = useSafeAreaInsets();

  return (
    <View className="flex-1 bg-gray-50">
      {/* 顶部用户信息 */}
      <View 
        className="bg-primary-500 pt-4 pb-16 px-4"
        style={{ 
          paddingTop: insets.top,
          backgroundColor: '#FF4785',
          backgroundImage: 'linear-gradient(139deg, #FF4785 0%, #FF7B9C 50%, #FFA8B4 100%)',
        }}
      >
        {/* 顶部工具栏 */}
        <View className="flex-row justify-end mb-1">
          <TouchableOpacity 
            className="w-10 h-10 items-center justify-center"
            activeOpacity={0.7}
            onPress={() => console.log('打开设置')}
          >
            <Ionicons name="settings-outline" size={24} color="white" />
          </TouchableOpacity>
          <TouchableOpacity 
            className="w-10 h-10 items-center justify-center"
            activeOpacity={0.7}
            onPress={() => console.log('打开通知')}
          >
            <Ionicons name="notifications-outline" size={24} color="white" />
            <View className="absolute right-1.5 top-1.5 w-2 h-2 rounded-full bg-white" />
          </TouchableOpacity>
        </View>

        {/* 用户基本信息 */}
        <View className="flex-row items-center">
          <TouchableOpacity 
            className="relative"
            activeOpacity={0.9}
            onPress={() => router.push('/(auth)/login')}
          >
            <Image
              source={require('../../assets/images/react-logo.png')}
              className="w-20 h-20 rounded-full border-2 border-white/30"
            />
            <View className="absolute right-0 bottom-0 w-6 h-6 bg-white rounded-full items-center justify-center">
              <Ionicons name="camera" size={14} color="#666" />
            </View>
          </TouchableOpacity>
          
          <View className="flex-1 ml-4">
            <TouchableOpacity 
              className="flex-row items-center"
              activeOpacity={0.7}
              onPress={() => router.push('/(auth)/login')}
            >
              <Text className="text-white text-xl font-semibold mr-2">
                点击登录
              </Text>
              <Ionicons name="chevron-forward" size={20} color="white" />
            </TouchableOpacity>
            <Text className="text-white/80 text-sm mt-1">
              登录体验更多精彩功能
            </Text>
          </View>
        </View>

        {/* 用户数据统计 */}
        <View className="flex-row justify-between mt-6 px-2">
          {userStats.map(item => (
            <TouchableOpacity
              key={item.id}
              className="items-center"
              activeOpacity={0.7}
            >
              <Text className="text-white text-lg font-semibold">{item.value}</Text>
              <Text className="text-white/80 text-sm mt-1">{item.title}</Text>
            </TouchableOpacity>
          ))}
        </View>
      </View>

      {/* 主内容区域 */}
      <View className="flex-1 -mt-8">
        {/* 订单卡片（固定） */}
        <View className="px-4">
          <View className="bg-white rounded-2xl shadow-sm overflow-hidden">
            <TouchableOpacity 
              className="flex-row items-center justify-between p-4 border-b border-gray-100"
              activeOpacity={0.7}
              onPress={() => router.push('/order/list')}
            >
              <Text className="text-base font-medium text-gray-800">我的订单</Text>
              <View className="flex-row items-center">
                <Text className="text-sm text-gray-400 mr-1">查看全部订单</Text>
                <Ionicons name="chevron-forward" size={16} color="#9ca3af" />
              </View>
            </TouchableOpacity>

            <View className="flex-row py-4">
              {orderTypes.map(item => (
                <TouchableOpacity
                  key={item.id}
                  className="flex-1 items-center"
                  activeOpacity={0.7}
                  onPress={() => router.push({
                    pathname: '/order/list',
                    params: { status: item.id }
                  })}
                >
                  <View className="relative w-12 h-12 items-center justify-center">
                    <Ionicons name={item.icon as any} size={28} color="#666" />
                    {item.badge && (
                      <View className="absolute -right-2 -top-1 min-w-[18px] h-[18px] bg-red-500 rounded-full items-center justify-center px-1">
                        <Text className="text-white text-[10px]">{item.badge}</Text>
                      </View>
                    )}
                  </View>
                  <Text className="text-sm text-gray-600 mt-1">{item.name}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </View>
        </View>

        {/* 可滚动区域 */}
        <ScrollView 
          className="flex-1 mt-4"
          showsVerticalScrollIndicator={false}
        >
          <View className="px-4">
            {/* 功能菜单 */}
            {menuItems.map((section, index) => (
              <View 
                key={section.title} 
                className="bg-white rounded-2xl shadow-sm mb-4 overflow-hidden"
              >
                <View className="p-4 border-b border-gray-100">
                  <Text className="text-base font-medium text-gray-800">
                    {section.title}
                  </Text>
                </View>
                <View className="flex-row flex-wrap">
                  {section.items.map(item => (
                    <TouchableOpacity
                      key={item.id}
                      className="w-1/4 items-center py-4"
                      activeOpacity={0.7}
                      onPress={() => console.log('点击菜单:', item.name)}
                    >
                      <View className="relative">
                        <View className={`w-12 h-12 rounded-xl ${item.color} items-center justify-center mb-2`}>
                          <Ionicons name={item.icon as any} size={24} color="white" />
                        </View>
                        {item.badge && (
                          <View className="absolute -right-2 -top-1 bg-red-500 rounded-full px-1.5 py-0.5">
                            <Text className="text-white text-[10px]">{item.badge}</Text>
                          </View>
                        )}
                      </View>
                      <Text className="text-sm text-gray-600">{item.name}</Text>
                    </TouchableOpacity>
                  ))}
                </View>
              </View>
            ))}

            {/* 底部安全提示 */}
            <View className="mb-8 items-center">
              <Text className="text-xs text-gray-400">
                您的账号安全由国家信息安全中心保障
              </Text>
            </View>
          </View>
        </ScrollView>
      </View>
    </View>
  );
} 